<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form inline>
          <el-form-item label="搜索">
            <el-input
              clearable
              placeholder="标题/内容"
              prefix-icon="el-icon-search"
              v-model="searchForm.queryConditions"
              size="medium"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="medium" type="primary" @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-card v-for="item in list" :key="item.id" v-loading="isReadingLoading">
      <template slot="header">
        <h3>
          <span>{{ item.notice.ntitle }}</span>
        </h3>
        <div class="author">
          <i class="iconfont icon-chuangzuozhezhongxin"></i>
          <span>{{ item.accountInfo.username }}</span>
        </div>
        <div class="time">
          <i class="iconfont icon-time"></i>
          <span>{{ item.notice.updateTime }}</span>
        </div>
      </template>

      <div class="messageContainer">
        <div class="content">
          <div class="content-html" v-html="item.notice.ncontent"></div>
        </div>

        <div class="footer">
          <ul>
            <li>
              <i class="iconfont icon-ico-"></i>
              <el-tag
                v-if="item.notice.roleId === 'f2779e805950be76390fff2b186879ad'"
                type="success"
                size="mini"
                >管理员</el-tag
              >
              <el-tag
                v-else-if="
                  item.notice.roleId === 'ebeda8021fccea8209458c3f89b80aad'
                "
                type="primary"
                size="mini"
                >采购员</el-tag
              >
              <el-tag
                v-else-if="
                  item.notice.roleId === 'ebd95568c552bc9e808c9b6b680eb6f8'
                "
                type="warning"
                size="mini"
                >供应商</el-tag
              >
              <el-tag v-else type="danger" size="mini">全部</el-tag>
              <div class="buttonDiv">
                <el-tooltip content="删除记录" placement="top">
                  <el-button
                    plain
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="deleteReadingAnnouncement(item)"
                  ></el-button>
                </el-tooltip>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>

    <el-pagination
      :current-page="paging.current"
      :page-sizes="paging.pageSizes"
      :page-size="paging.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paging.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getAllReadingNotice,
  delReadingNotice,
} from "@/api/AnnouncementCenter";
export default {
  name: "readingAnnouncement",
  data() {
    return {
      searchForm: {
        queryConditions: "",
      },
      paging: {
        total: 0,
        current: 1,
        pageSizes: [5, 10, 15],
        size: 5,
      },
      list: [],
      index: 0,
      announcementInfo: {},
      isReadingLoading:false,
    };
  },
  computed: {
    ...mapGetters(["roles", "accountId"]),
  },
  created() {
    this.isReadingLoading = true;
    this.getData();
    // console.log(this.name,this.userInfo,this.roles)
  },
  methods: {
    search() {
      this.paging.current = 1;
      this.isReadingLoading = true;
      this.getData();
    },
    getData() {
      const form = {
        ...this.searchForm,
        page: this.paging.current,
        pageSize: this.paging.size,
        accountId: this.accountId,
      };
      getAllReadingNotice(form)
        .then((res) => {
          console.log(res.data);
          this.list = res.data.infos;
          this.paging.total = res.data.totalCount;
          this.isReadingLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.paging.total = 0;
          this.isReadingLoading = false;
        });
    },
    handleSizeChange(val) {
      this.paging.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.getData();
    },
  
    deleteReadingAnnouncement(data) {
      this.$confirm("删除公告,将从系统彻底移除,是否继续?", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const result = await delReadingNotice({ noticeId: data.notice.id,accountId: this.accountId });
          console.log(result);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  }
};
</script>
<style scoped>
.container .el-card {
  margin-bottom: 10px;
}
.container .el-card /deep/ .el-card__header,
.container .el-card /deep/ .el-card__body {
  position: relative;
  /* border: 1px solid black; */
  padding: 5px 5px 5px 20px;
}
.container .el-card .el-card__header h3,
.container .el-card .el-card__header .author,
.container .el-card .el-card__header .time {
  margin: 5px 0;
  display: inline-block;
}
.container .el-card .el-card__header .author {
  position: absolute;
  font-size: 15px;
  height: 100%;
  right: 200px;
}
.container .el-card .el-card__header .time {
  position: absolute;
  font-size: 15px;
  height: 100%;
  right: 20px;
  /* border: 1px solid black; */
}
.container .el-card .el-card__header .author i,
.container .el-card .el-card__header .time i {
  margin-right: 5px;
}
.messageContainer {
  /* border: 1px solid black; */
}
.messageContainer .content {
  border-bottom: 1px solid #e6ebf5;
  padding-bottom: 10px;
}

.messageContainer /deep/ .footer {
  margin: 5px 0;
  position: relative;
}
.messageContainer .footer ul {
  list-style: none;
  /* border: 1px solid black; */
  margin: 0;
  padding: 0;
}
.messageContainer .footer ul li {
  /* border: 1px solid black; */
  display: inline-block;
  margin-right: 20px;
  color: #4e5969;
}
.messageContainer .footer ul li i {
  /* border: 1px solid black; */
  font-size: 18px;
  margin-right: 5px;
}
.messageContainer .footer ul li .el-tag {
  /* border: 1px solid black; */

  margin-right: 5px;
}
.messageContainer .footer ul li .counts {
  /* border: 1px solid black; */
  font-size: 18px;
}
.messageContainer .footer ul li .buttonDiv {
  display: inline-block;
  position: absolute;
  right: 5%;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>